<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 同步上传 -->
    <form action="">
        <!-- multiple可以上传多张文件 -->
        <!-- name="file[]"标识多张上传时的数组 -->
        <input type="file" name="file[]" multiple>
    </form>

    <!-- 异步上传 -->
    <input type="text" id="userName" value="123">
    <input type="submit" id="submiutBtn">1321</input>


    <input type="file" id="file" multiple>
    <input type="submit" id="submiutBtn1">
    <script>
        // 文件上传都会转化为二进制上传 multipart/form-data

        console.log(new FormData);
        var oUsername = document.getElementById('userName'),
            oSubmitBtn = document.getElementById('submiutBtn'),
            oFile = document.getElementById('file'),
            fd = new FormData();
        oSubmitBtn.onclick = function() {
            console.log(1232113213111111111111);
            // 添加值到FormData中
            fd.append('Usernmae', oUsername.value)
            console.log(fd);
            // 通过get获取对应的值
            console.log(fd.get('Usernmae'));
            // 通过set给对应的键名，设置值
            fd.set('Usernmae', '1321231231')
            console.log(fd.get('Usernmae'));
            console.log(fd.has('Usernmae'));
            // 对于不存在值返回值为null，而不是undefined
            console.log(fd.get('pass'));
        }
        oFile.onchange = function() {
            console.log(oFile.files);
            var files = oFile.files,
                fileLen = files.length;
            if (fileLen <= 0) {
                console.log('您还没有选择图片')
                return
            }
            if (fileLen > 5) {
                console.log('最多上传五张图片')
                return
            }
            var fileName = '',
                fileSize = 0,
                maxsize = 1048576,
                errorInfo = '',
                fa = null;
            for (var i = 0; i < fileLen; i++) {
                fileName = files[i].name;
                fileSize = files[i].size;
                if (!/\.(gif|jpg|jpeg|png)$/.test(fileName)) {
                    errorInfo = '文件不是图片类型' + '[' + fileName + ']'
                }
                if (fileSize > maxsize) {
                    errorInfo = '超过可上传大小' + '[' + fileName + ']'

                }
                if (errorInfo !== '') {
                    console.log(errorInfo);
                } else {
                    fd = new FormData();
                    fd.append('file', files[i]);
                    var o = window.XMLHttpRequest ?
                        new window.XMLHttpRequest() :
                        new ActiveXObject('Microsoft.XMLHTTP');
                    o.open('post', 'server/upload,php');
                    //进度条
                    o.upload.onprogress = function(e) {
                        var e = e || window.event;
                        // e.loaded已经上传的数据量
                        // e.total总数据量
                        percent = e.loaded / e.total * 100 + '%';
                        // thisPro
                        console.log(e);
                    }
                    o.send(fd)
                }
            }
        }
    </script>
</body>

</html>